<template>
    <view>
        <uni-list>
            <uni-list-item title="Time" :rightText="data.createTime"></uni-list-item>
            <uni-list-item title="Status" :rightText="status[data.status]"></uni-list-item>

            <uni-list-item title="Pay Certificate" :rightText="data.payCertificateUrl"></uni-list-item>
            <uni-list-item title="Total Amount" :rightText="data.totalAmount ? data.totalAmount + '' : '0'"></uni-list-item>
            <uni-list-item title="Contract" :rightText="data.contractUrls"></uni-list-item>
            <uni-list-item title="Contract Start" :rightText="data.startTime"></uni-list-item>
            <uni-list-item title="Contract End" :rightText="data.endDate"></uni-list-item>

            <list-item-user title="Listing" :data="data.houseCreator"></list-item-user>
            <list-item-user title="Key" :data="data.key"></list-item-user>
            <list-item-user title="Referrers" :data="data.referrers"></list-item-user>
            <list-item-user title="Maintainer" :data="data.visitor"></list-item-user>
            <list-item-user title="First Visitor" :data="data.firstVisitor"></list-item-user>
            <!-- <list-item-user title="Tenant" :data="data.user"></list-item-user> -->
            <list-item-user title="Dealer" :data="data.dealer"></list-item-user>
        </uni-list>
        <view class="flex-layout-row flex-center gap">
            <u-button @click="handleRemove" type="error" text="Delete"></u-button>
            <u-button @click="handleUpload('/pages/detail/check/contract')" class="gap-row" type="primary" text="Contract"></u-button>
            <u-button @click="handleUpload('/pages/detail/check/pay')" type="primary" text="PayCertificate"></u-button>
        </view>
    </view>
</template>

<script>
import { showFailure, showMessage, showSuccess } from '../../../lib/helper';
import { orderDetail, removeOrder } from '../../../lib/service';
export default {
    data() {
        return {
            id: '',
            status: ['', 'Visited', 'To be paid', 'Paying', 'Paid'],
            payStatus: ['', 'Wait', 'Paying', 'Paid'],
            data: {}
        };
    },
    onLoad(options) {
        this.id = options.id;
    },
    onShow() {
        this.loadData();
    },

    methods: {
        handleRemove() {
            uni.showModal({
                cancelText: this.$t('text.cancel'),
                confirmText: this.$t('text.confirm'),
                content: this.$t('text.delete.tip'),
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading();
                        removeOrder(this.id)
                            .then((res) => {
                                showSuccess();
                                uni.hideLoading();
                                setTimeout(() => {
                                    uni.navigateBack();
                                }, 380);
                            })
                            .catch((err) => {
                                showMessage();
                            });
                    }
                }
            });
        },
        handleUpload(url) {
            uni.navigateTo({
                url: url + '?id=' + this.id
            });
        },
        loadData() {
            if (!this.$store.state.user) {
                return false;
            }

            uni.showLoading();
            orderDetail(this.id)
                .then((res) => {
                    uni.hideLoading();
                    var data = res.data;
                    data.contractUrls = data.contractUrls ? data.contractUrls.slice(0, 20) + '...' : data.contractUrls;
                    data.payCertificateUrl = data.payCertificateUrl ? data.payCertificateUrl.slice(0, 20) + '...' : data.payCertificateUrl;
                    this.data = data;
                })
                .catch((res) => {
                    uni.hideLoading();
                    showFailure();
                });
        }
    }
};
</script>

<style></style>
